
<template>
  <div class="app-container">
    <el-card>
      <!-- <div slot="header">
        <span>业务线信息</span>
      </div> -->
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="名称">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="Code">{{ detail.code }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card>
      <div slot="header">
        <span>环境配置</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addRowVisible">添加</el-button>

      </div>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="path"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="env_name" label="环境名" />
        <el-table-column prop="auto_audit" label="自动审核">
          <template slot-scope="scope">
            <span v-if="scope.row.auto_audit === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="kube_name" label="集群名" />
        <el-table-column prop="namespace" label="命名空间" />
        <el-table-column prop="capacity_name" label="计算方案" />
        <el-table-column prop="repo_name" label="镜像仓库" />
        <el-table-column prop="repo_pull_secret" label="镜像仓库秘钥" />
        <el-table-column prop="repo_namespace" label="镜像空间" />
        <el-table-column prop="repo_namespace_src" label="前置镜像空间">
          <template slot="header">
            <el-tooltip class="item" effect="dark" content="若存在，将从该镜像空间同步" placement="top">
              <span>前置镜像空间<i class="el-icon-question" /></span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="git_merge" label="分支合并">
          <template slot-scope="scope">
            <span v-if="scope.row.git_merge === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="editRowVisible(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="delRowHandle(scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tablePageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" title="环境配置">
      <el-form ref="form" :model="form" style="width: 50%">
        <!-- <el-form-item label="业务线" :label-width="formLabelWidth" hidden>
          <el-input v-model="form.business_id" />
        </el-form-item> -->
        <el-form-item
          label="环境"
          :label-width="formLabelWidth"
          prop="env_id"
          :rules="[
            { required: true, message: '环境不能为空'}
          ]"
        >
          <el-select v-model="form.env_id" placeholder="请选择">
            <el-option
              v-for="item in envs"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="自动审核" :label-width="formLabelWidth">
          <el-tooltip content="默认关闭，开启后流程将自动审核" placement="top">
            <el-switch
              v-model="form.auto_audit"
              :active-value="1"
              :inactive-value="0"
            />
          </el-tooltip>

        </el-form-item>
        <el-form-item
          label="集群"
          :label-width="formLabelWidth"
          prop="kube_id"
          :rules="[
            { required: true, message: '集群不能为空'}
          ]"
        >
          <el-select v-model="form.kube_id" placeholder="请选择">
            <el-option
              v-for="item in kubes"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="命名空间"
          :label-width="formLabelWidth"
          prop="namespace"
          :rules="[
            { required: true, message: '命名空间不能为空'}
          ]"
        >
          <el-input v-model="form.namespace" />
        </el-form-item>
        <el-form-item label="计算方案" :label-width="formLabelWidth">
          <el-select v-model="form.capacity_id" placeholder="请选择">
            <el-option
              v-for="item in capacitylist"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="镜像仓库"
          :label-width="formLabelWidth"
          prop="repo_id"
          :rules="[
            { required: true, message: '镜像仓库不能为空'}
          ]"
        >
          <el-select v-model="form.repo_id" placeholder="请选择">
            <el-option
              v-for="item in repolist"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="镜像仓库秘钥"
          :label-width="formLabelWidth"
          prop="repo_pull_secret"
          :rules="[
            { required: true, message: '镜像仓库秘钥不能为空'}
          ]"
        >
          <el-input v-model="form.repo_pull_secret" />
        </el-form-item>
        <el-form-item
          label="镜像空间"
          :label-width="formLabelWidth"
          prop="repo_namespace"
          :rules="[
            { required: true, message: '镜像空间不能为空'}
          ]"
        >
          <el-input v-model="form.repo_namespace" />
        </el-form-item>
        <el-form-item label="前置镜像空间" :label-width="formLabelWidth">
          <span slot="label">
            <el-tooltip class="item" effect="dark" content="若存在，将从该镜像空间同步" placement="top">
              <span>前置镜像空间<i class="el-icon-question" /></span>
            </el-tooltip>
          </span>
          <el-input v-model="form.repo_namespace_src" />
        </el-form-item>
        <el-form-item label="分支合并" :label-width="formLabelWidth">
          <el-tooltip content="谨慎选择，开启后在更新流程后会将代码合并至主分支" placement="top">
            <el-switch
              v-model="form.git_merge"
              :active-value="1"
              :inactive-value="0"
            />
          </el-tooltip>

        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRowHandle('form')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addRow, delRow, editRow } from '@/api/setting/lob'
import { getList as getEnv } from '@/api/resource/env'
import { getList as getKube } from '@/api/resource/kube'
import { getList as getRepo } from '@/api/resource/repo'
import { getList as getCapacity } from '@/api/setting/capacity'
import { getRow as getDetail } from '@/api/resource/business'

export default {
  data() {
    return {
      tableData: [],
      tablePageSize: 10,
      tablePage: 1,
      tableTotal: 0,
      listLoading: true,
      searchParam: {
        'business_id': this.$route.query.id
      },
      dialogFormVisible: false,
      form: {
        git_merge: 0,
        auto_audit: 0
      },
      formLabelWidth: '120px',
      envs: [],
      kubes: [],
      capacitylist: [],
      repolist: [],
      detail: {}
    }
  },
  created() {
    this.fetchData()
    this.fetchSelectData()
  },
  methods: {
    initform() {
      this.form = { business_id: this.$route.query.id, git_merge: 0, auto_audit: 0 }
    },
    fetchData() {
      this.fetchDetail()
      this.listLoading = true
      const params = Object.assign(this.searchParam, { 'page': this.tablePage, 'page_size': this.tablePageSize })
      getList(params).then(response => {
        this.tableData = response.data
        this.tableTotal = response.total
        this.listLoading = false
      })
    },
    fetchDetail() {
      getDetail(this.$route.query.id).then(response => {
        this.detail = response
      })
    },
    fetchSelectData() {
      getEnv().then(response => {
        this.envs = response.data
      })
      getKube().then(response => {
        this.kubes = response.data
      })
      getCapacity().then(response => {
        this.capacitylist = response.data
      })
      getRepo().then(response => {
        this.repolist = response.data
      })
    },
    handleCurrentChange(page) {
      this.tablePage = page
      console.log(page, this.tablePageSize)
      this.fetchData()
    },
    handleSizeChange(pagesize) {
      this.tablePageSize = pagesize
      this.fetchData()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    addRowVisible() {
      // 解决form缓存问题
      this.initform()
      this.dialogFormVisible = true
    },
    editRowVisible(row) {
      this.form = Object.assign({}, row)
      console.log('git merge', this.form.git_merge)
      this.dialogFormVisible = true
    },
    delRowHandle(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 执行调用删除接口
          delRow({ id: row.id }).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addRowHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          console.log(this.form.id)
          if (this.form.id !== undefined) {
            editRow(this.form.id, this.form).then(response => {
              this.$message({
                type: 'success',
                message: '编辑成功'
              })
              this.fetchData()
            })
          } else {
            addRow(this.form).then(response => {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.fetchData()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>

</style>
